home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / Date & Calendars / dynamic-cal.izs < prev    next >
Text File  |  2005-07-11  |  15KB  |  445 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Dynamic Calendar 
  4. <!/TITLE>
  5.  
  6. <!DESCRIPTION>This calender script allows you to select any month from any year to find out about any date!<!/DESCRIPTION> 
  7.  
  8. <!CATEGORY>calenders<!/CATEGORY>
  9.  
  10. <!SCRIPT>
  11. <!-- START OF SCRIPT -->
  12.  
  13. <!-- TWO STEPS TO INSTALL DYNAMIC CALENDAR:
  14.  
  15.   1.  Copy the coding into the HEAD of your HTML document
  16.   2.  Add the last code into the BODY of your HTML document  -->
  17.  
  18. <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  19.  
  20. <HEAD>
  21.  
  22. <SCRIPT LANGUAGE="JavaScript">
  23. <!-- Original:  Nick Korosi (nfk2000@hotmail.com) -->
  24.  
  25. <!-- Begin
  26. var dDate = new Date();
  27. var dCurMonth = dDate.getMonth();
  28. var dCurDayOfMonth = dDate.getDate();
  29. var dCurYear = dDate.getFullYear();
  30. var objPrevElement = new Object();
  31.  
  32. function fToggleColor(myElement) {
  33. var toggleColor = "#ff0000";
  34. if (myElement.id == "calDateText") {
  35. if (myElement.color == toggleColor) {
  36. myElement.color = "";
  37. } else {
  38. myElement.color = toggleColor;
  39.    }
  40. } else if (myElement.id == "calCell") {
  41. for (var i in myElement.children) {
  42. if (myElement.children[i].id == "calDateText") {
  43. if (myElement.children[i].color == toggleColor) {
  44. myElement.children[i].color = "";
  45. } else {
  46. myElement.children[i].color = toggleColor;
  47.             }
  48.          }
  49.       }
  50.    }
  51. }
  52. function fSetSelectedDay(myElement){
  53. if (myElement.id == "calCell") {
  54. if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) {
  55. myElement.bgColor = "#c0c0c0";
  56. objPrevElement.bgColor = "";
  57. document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);
  58. objPrevElement = myElement;
  59.       }
  60.    }
  61. }
  62. function fGetDaysInMonth(iMonth, iYear) {
  63. var dPrevDate = new Date(iYear, iMonth, 0);
  64. return dPrevDate.getDate();
  65. }
  66. function fBuildCal(iYear, iMonth, iDayStyle) {
  67. var aMonth = new Array();
  68. aMonth[0] = new Array(7);
  69. aMonth[1] = new Array(7);
  70. aMonth[2] = new Array(7);
  71. aMonth[3] = new Array(7);
  72. aMonth[4] = new Array(7);
  73. aMonth[5] = new Array(7);
  74. aMonth[6] = new Array(7);
  75. var dCalDate = new Date(iYear, iMonth-1, 1);
  76. var iDayOfFirst = dCalDate.getDay();
  77. var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);
  78. var iVarDate = 1;
  79. var i, d, w;
  80. if (iDayStyle == 2) {
  81. aMonth[0][0] = "Sunday";
  82. aMonth[0][1] = "Monday";
  83. aMonth[0][2] = "Tuesday";
  84. aMonth[0][3] = "Wednesday";
  85. aMonth[0][4] = "Thursday";
  86. aMonth[0][5] = "Friday";
  87. aMonth[0][6] = "Saturday";
  88. } else if (iDayStyle == 1) {
  89. aMonth[0][0] = "Sun";
  90. aMonth[0][1] = "Mon";
  91. aMonth[0][2] = "Tue";
  92. aMonth[0][3] = "Wed";
  93. aMonth[0][4] = "Thu";
  94. aMonth[0][5] = "Fri";
  95. aMonth[0][6] = "Sat";
  96. } else {
  97. aMonth[0][0] = "Su";
  98. aMonth[0][1] = "Mo";
  99. aMonth[0][2] = "Tu";
  100. aMonth[0][3] = "We";
  101. aMonth[0][4] = "Th";
  102. aMonth[0][5] = "Fr";
  103. aMonth[0][6] = "Sa";
  104. }
  105. for (d = iDayOfFirst; d < 7; d++) {
  106. aMonth[1][d] = iVarDate;
  107. iVarDate++;
  108. }
  109. for (w = 2; w < 7; w++) {
  110. for (d = 0; d < 7; d++) {
  111. if (iVarDate <= iDaysInMonth) {
  112. aMonth[w][d] = iVarDate;
  113. iVarDate++;
  114.       }
  115.    }
  116. }
  117. return aMonth;
  118. }
  119. function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {
  120. var myMonth;
  121. myMonth = fBuildCal(iYear, iMonth, iDayStyle);
  122. document.write("<table border='1'>")
  123. document.write("<tr>");
  124. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");
  125. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");
  126. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");
  127. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");
  128. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");
  129. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");
  130. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");
  131. document.write("</tr>");
  132. for (w = 1; w < 7; w++) {
  133. document.write("<tr>")
  134. for (d = 0; d < 7; d++) {
  135. document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>");
  136. if (!isNaN(myMonth[w][d])) {
  137. document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");
  138. } else {
  139. document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)> </font>");
  140. }
  141. document.write("</td>")
  142. }
  143. document.write("</tr>");
  144. }
  145. document.write("</table>")
  146. }
  147. function fUpdateCal(iYear, iMonth) {
  148. myMonth = fBuildCal(iYear, iMonth);
  149. objPrevElement.bgColor = "";
  150. document.all.calSelectedDate.value = "";
  151. for (w = 1; w < 7; w++) {
  152. for (d = 0; d < 7; d++) {
  153. if (!isNaN(myMonth[w][d])) {
  154. calDateText[((7*w)+d)-7].innerText = myMonth[w][d];
  155. } else {
  156. calDateText[((7*w)+d)-7].innerText = " ";
  157.          }
  158.       }
  159.    }
  160. }
  161. // End -->
  162. </script>
  163. </head>
  164. </HEAD>
  165.  
  166. <!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
  167.  
  168. <BODY>
  169.  
  170. <script language="JavaScript" for=window event=onload>
  171. <!-- Begin
  172. var dCurDate = new Date();
  173. frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;
  174. for (i = 0; i < frmCalendarSample.tbSelYear.length; i++)
  175. if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear())
  176. frmCalendarSample.tbSelYear.options[i].selected = true;
  177. //  End -->
  178. </script>
  179.  
  180. <form name="frmCalendarSample" method="post" action="">
  181. <input type="hidden" name="calSelectedDate" value="">
  182.  
  183. <table border="1">
  184. <tr>
  185. <td>
  186. <select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
  187. <option value="1">January</option>
  188. <option value="2">February</option>
  189. <option value="3">March</option>
  190. <option value="4">April</option>
  191. <option value="5">May</option>
  192. <option value="6">June</option>
  193. <option value="7">July</option>
  194. <option value="8">August</option>
  195. <option value="9">September</option>
  196. <option value="10">October</option>
  197. <option value="11">November</option>
  198. <option value="12">December</option>
  199. </select>
  200.   
  201. <select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
  202. <option value="1998">1998</option>
  203. <option value="1999">1999</option>
  204. <option value="2000">2000</option>
  205. <option value="2001">2001</option>
  206. <option value="2002">2002</option>
  207. <option value="2003">2003</option>
  208. <option value="2004">2004</option>
  209. </select>
  210. </td>
  211. </tr>
  212. <tr>
  213. <td>
  214. <script language="JavaScript">
  215. var dCurDate = new Date();
  216. fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);
  217. </script>
  218. </td>
  219. </tr>
  220. </table>
  221. </form>
  222.  
  223. <!-- END OF SCRIPT -->
  224. <!/SCRIPT>
  225.  
  226. <!PREVIEW>
  227. <!-- START OF SCRIPT -->
  228.  
  229.  
  230. <!-- TWO STEPS TO INSTALL DYNAMIC CALENDAR:
  231.  
  232.   1.  Copy the coding into the HEAD of your HTML document
  233.   2.  Add the last code into the BODY of your HTML document  -->
  234.  
  235. <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  236.  
  237. <HEAD>
  238.  
  239. <SCRIPT LANGUAGE="JavaScript">
  240. <!-- Original:  Nick Korosi (nfk2000@hotmail.com) -->
  241.  
  242. <!-- Begin
  243. var dDate = new Date();
  244. var dCurMonth = dDate.getMonth();
  245. var dCurDayOfMonth = dDate.getDate();
  246. var dCurYear = dDate.getFullYear();
  247. var objPrevElement = new Object();
  248.  
  249. function fToggleColor(myElement) {
  250. var toggleColor = "#ff0000";
  251. if (myElement.id == "calDateText") {
  252. if (myElement.color == toggleColor) {
  253. myElement.color = "";
  254. } else {
  255. myElement.color = toggleColor;
  256.    }
  257. } else if (myElement.id == "calCell") {
  258. for (var i in myElement.children) {
  259. if (myElement.children[i].id == "calDateText") {
  260. if (myElement.children[i].color == toggleColor) {
  261. myElement.children[i].color = "";
  262. } else {
  263. myElement.children[i].color = toggleColor;
  264.             }
  265.          }
  266.       }
  267.    }
  268. }
  269. function fSetSelectedDay(myElement){
  270. if (myElement.id == "calCell") {
  271. if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) {
  272. myElement.bgColor = "#c0c0c0";
  273. objPrevElement.bgColor = "";
  274. document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);
  275. objPrevElement = myElement;
  276.       }
  277.    }
  278. }
  279. function fGetDaysInMonth(iMonth, iYear) {
  280. var dPrevDate = new Date(iYear, iMonth, 0);
  281. return dPrevDate.getDate();
  282. }
  283. function fBuildCal(iYear, iMonth, iDayStyle) {
  284. var aMonth = new Array();
  285. aMonth[0] = new Array(7);
  286. aMonth[1] = new Array(7);
  287. aMonth[2] = new Array(7);
  288. aMonth[3] = new Array(7);
  289. aMonth[4] = new Array(7);
  290. aMonth[5] = new Array(7);
  291. aMonth[6] = new Array(7);
  292. var dCalDate = new Date(iYear, iMonth-1, 1);
  293. var iDayOfFirst = dCalDate.getDay();
  294. var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);
  295. var iVarDate = 1;
  296. var i, d, w;
  297. if (iDayStyle == 2) {
  298. aMonth[0][0] = "Sunday";
  299. aMonth[0][1] = "Monday";
  300. aMonth[0][2] = "Tuesday";
  301. aMonth[0][3] = "Wednesday";
  302. aMonth[0][4] = "Thursday";
  303. aMonth[0][5] = "Friday";
  304. aMonth[0][6] = "Saturday";
  305. } else if (iDayStyle == 1) {
  306. aMonth[0][0] = "Sun";
  307. aMonth[0][1] = "Mon";
  308. aMonth[0][2] = "Tue";
  309. aMonth[0][3] = "Wed";
  310. aMonth[0][4] = "Thu";
  311. aMonth[0][5] = "Fri";
  312. aMonth[0][6] = "Sat";
  313. } else {
  314. aMonth[0][0] = "Su";
  315. aMonth[0][1] = "Mo";
  316. aMonth[0][2] = "Tu";
  317. aMonth[0][3] = "We";
  318. aMonth[0][4] = "Th";
  319. aMonth[0][5] = "Fr";
  320. aMonth[0][6] = "Sa";
  321. }
  322. for (d = iDayOfFirst; d < 7; d++) {
  323. aMonth[1][d] = iVarDate;
  324. iVarDate++;
  325. }
  326. for (w = 2; w < 7; w++) {
  327. for (d = 0; d < 7; d++) {
  328. if (iVarDate <= iDaysInMonth) {
  329. aMonth[w][d] = iVarDate;
  330. iVarDate++;
  331.       }
  332.    }
  333. }
  334. return aMonth;
  335. }
  336. function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {
  337. var myMonth;
  338. myMonth = fBuildCal(iYear, iMonth, iDayStyle);
  339. document.write("<table border='1'>")
  340. document.write("<tr>");
  341. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");
  342. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");
  343. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");
  344. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");
  345. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");
  346. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");
  347. document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");
  348. document.write("</tr>");
  349. for (w = 1; w < 7; w++) {
  350. document.write("<tr>")
  351. for (d = 0; d < 7; d++) {
  352. document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>");
  353. if (!isNaN(myMonth[w][d])) {
  354. document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");
  355. } else {
  356. document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)> </font>");
  357. }
  358. document.write("</td>")
  359. }
  360. document.write("</tr>");
  361. }
  362. document.write("</table>")
  363. }
  364. function fUpdateCal(iYear, iMonth) {
  365. myMonth = fBuildCal(iYear, iMonth);
  366. objPrevElement.bgColor = "";
  367. document.all.calSelectedDate.value = "";
  368. for (w = 1; w < 7; w++) {
  369. for (d = 0; d < 7; d++) {
  370. if (!isNaN(myMonth[w][d])) {
  371. calDateText[((7*w)+d)-7].innerText = myMonth[w][d];
  372. } else {
  373. calDateText[((7*w)+d)-7].innerText = " ";
  374.          }
  375.       }
  376.    }
  377. }
  378. // End -->
  379. </script>
  380. </head>
  381. </HEAD>
  382.  
  383. <!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
  384.  
  385. <BODY>
  386.  
  387. <script language="JavaScript" for=window event=onload>
  388. <!-- Begin
  389. var dCurDate = new Date();
  390. frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;
  391. for (i = 0; i < frmCalendarSample.tbSelYear.length; i++)
  392. if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear())
  393. frmCalendarSample.tbSelYear.options[i].selected = true;
  394. //  End -->
  395. </script>
  396.  
  397. <form name="frmCalendarSample" method="post" action="">
  398. <input type="hidden" name="calSelectedDate" value="">
  399.  
  400. <table border="1">
  401. <tr>
  402. <td>
  403. <select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
  404. <option value="1">January</option>
  405. <option value="2">February</option>
  406. <option value="3">March</option>
  407. <option value="4">April</option>
  408. <option value="5">May</option>
  409. <option value="6">June</option>
  410. <option value="7">July</option>
  411. <option value="8">August</option>
  412. <option value="9">September</option>
  413. <option value="10">October</option>
  414. <option value="11">November</option>
  415. <option value="12">December</option>
  416. </select>
  417.   
  418. <select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
  419. <option value="1998">1998</option>
  420. <option value="1999">1999</option>
  421. <option value="2000">2000</option>
  422. <option value="2001">2001</option>
  423. <option value="2002">2002</option>
  424. <option value="2003">2003</option>
  425. <option value="2004">2004</option>
  426. </select>
  427. </td>
  428. </tr>
  429. <tr>
  430. <td>
  431. <script language="JavaScript">
  432. var dCurDate = new Date();
  433. fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);
  434. </script>
  435. </td>
  436. </tr>
  437. </table>
  438. </form>
  439.  
  440.  
  441.  
  442. <!-- END OF SCRIPT -->
  443. <!/PREVIEW>
  444.  
  445. <!RELATED>NONE<!/RELATED>